<template>
  <div class="horizontal-project-management">
    <div class="content-header">
      <h1>横向课题管理</h1>
      <button class="btn btn-primary" @click="showAddModal = true">
        <i class="fas fa-plus"></i> 添加课题
      </button>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
      <div class="filter-row">
        <div class="filter-item">
          <label>课题名称：</label>
          <input type="text" v-model="filterForm.projectName" placeholder="请输入课题名称">
        </div>
        <div class="filter-item">
          <label>合作单位：</label>
          <input type="text" v-model="filterForm.cooperationUnit" placeholder="请输入合作单位">
        </div>
        <div class="filter-item">
          <label>状态：</label>
          <select v-model="filterForm.status">
            <option value="">全部</option>
            <option value="0">待审核</option>
            <option value="1">已通过</option>
            <option value="2">已拒绝</option>
          </select>
        </div>
        <div class="filter-item">
          <button class="btn btn-secondary" @click="filterProjects">
            <i class="fas fa-search"></i> 筛选
          </button>
          <button class="btn btn-outline" @click="resetFilter">
            <i class="fas fa-redo"></i> 重置
          </button>
        </div>
      </div>
    </div>

    <!-- 课题列表 -->
    <HorizontalProjectTable
      :projects="projects"
      @edit="editProject"
      @delete="deleteProject"
      @audit="auditProject"
    />

    <!-- 添加课题模态框 -->
    <div v-if="showAddModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>添加横向课题</h2>
          <span class="close" @click="showAddModal = false">&times;</span>
        </div>
        <div class="modal-body">
          <form @submit.prevent="addProject">
            <div class="form-row">
              <div class="form-group">
                <label>课题名称 *</label>
                <input type="text" v-model="projectForm.projectName" required>
              </div>
              <div class="form-group">
                <label>合作单位 *</label>
                <input type="text" v-model="projectForm.cooperationUnit" required>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>负责人 *</label>
                <input type="text" v-model="projectForm.principal" required>
              </div>
              <div class="form-group">
                <label>项目编号</label>
                <input type="text" v-model="projectForm.projectNumber">
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>开始时间</label>
                <input type="date" v-model="projectForm.startDate">
              </div>
              <div class="form-group">
                <label>结束时间</label>
                <input type="date" v-model="projectForm.endDate">
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>经费(万元)</label>
                <input type="number" v-model="projectForm.funding" step="0.01">
              </div>
              <div class="form-group">
                <label>状态</label>
                <select v-model="projectForm.status">
                  <option value="0">待审核</option>
                  <option value="1">已通过</option>
                  <option value="2">已拒绝</option>
                </select>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>项目描述</label>
                <textarea v-model="projectForm.description" rows="3"></textarea>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showAddModal = false">取消</button>
          <button class="btn btn-primary" @click="submitProject">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getHorizontalProjects, addHorizontalProject, updateHorizontalProject, deleteHorizontalProject as delProject, auditHorizontalProject as auditProjectApi } from '../api/horizontalProject';
import HorizontalProjectTable from '../components/HorizontalProjectTable.vue';

const projects = ref([]);
const showAddModal = ref(false);
const filterForm = ref({
  projectName: '',
  cooperationUnit: '',
  status: ''
});

const projectForm = ref({
  projectName: '',
  cooperationUnit: '',
  principal: '',
  projectNumber: '',
  startDate: '',
  endDate: '',
  funding: '',
  status: 0,
  description: ''
});

function filterProjects() {
  getHorizontalProjects(filterForm.value).then(res => {
    projects.value = res.data;
  }).catch(err => {
    console.error('获取横向课题列表失败:', err);
  });
}

function resetFilter() {
  filterForm.value = {
    projectName: '',
    cooperationUnit: '',
    status: ''
  };
  filterProjects();
}

function editProject(project) {
  // 实现编辑功能
  console.log('编辑横向课题:', project);
}

function deleteProject(id) {
  if (confirm('确定要删除这个横向课题吗？')) {
    delProject(id).then(() => {
      filterProjects();
    }).catch(err => {
      console.error('删除横向课题失败:', err);
    });
  }
}

function auditProject(id, status) {
  const rejectReason = status === 2 ? prompt('请输入拒绝原因：') : '';
  auditProjectApi(id, status, rejectReason).then(() => {
    filterProjects();
  }).catch(err => {
    console.error('审核失败:', err);
  });
}

function submitProject() {
  addHorizontalProject(projectForm.value).then(() => {
    showAddModal.value = false;
    filterProjects();
    // 重置表单
    projectForm.value = {
      projectName: '',
      cooperationUnit: '',
      principal: '',
      projectNumber: '',
      startDate: '',
      endDate: '',
      funding: '',
      status: 0,
      description: ''
    };
  }).catch(err => {
    console.error('添加横向课题失败:', err);
  });
}

onMounted(() => {
  filterProjects();
});
</script>

<style scoped>
.horizontal-project-management {
  padding: 20px;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.content-header h1 {
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #5a6268;
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: #6c757d;
  border: 1px solid #6c757d;
}

.btn-outline:hover {
  background: #6c757d;
  color: white;
}

.filter-section {
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.filter-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.filter-row:last-child {
  margin-bottom: 0;
}

.filter-item {
  display: flex;
  flex-direction: column;
  min-width: 150px;
}

.filter-item label {
  font-weight: 500;
  margin-bottom: 5px;
  color: #555;
}

.filter-item input,
.filter-item select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.filter-item input:focus,
.filter-item select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.modal {
  display: block;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: white;
  margin: 5% auto;
  border-radius: 10px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  color: #2c3e50;
  font-size: 20px;
  font-weight: 600;
}

.close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease;
}

.close:hover {
  color: #000;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 500;
  margin-bottom: 8px;
  color: #555;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}
</style> 